<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-07-06 12:47:05
 * @LastEditors: sanghx
 * @LastEditTime: 2020-07-10 09:29:56
--> 
<template>
  <div class="container">
    <div class="header">
      <div class="header-title">GITEE数据可视化大屏</div>
    </div>
    <div style="color: #bef2ff;position: absolute;right:2rem;top:2.5rem;">{{date}}</div>
    <!-- 地图背景 -->
    <div class="map">
      <div class="map1">
        <img src="../assets/img/tpl1/img/lbx.png" />
      </div>
    </div>
    <el-row class="container_box">
      <el-col :span="7">
        <div class="flex-row center lineHeight">
          <div>
            <el-avatar :src="user.avatar_url" :size="60"></el-avatar>
          </div>
          <div>{{user.name}}</div>
          <div>{{user.bio}}</div>
          <div>加入时间:{{parseTime(user.created_at)}}</div>
        </div>
        <div class="flex-row">
          <div class="flex-row_title">
            <i class="el-icon-coffee-cup title_icon"></i>
            语言分类
          </div>
          <Pie :echartData="pieData" v-if="show" />
          <Loding v-else />
        </div>
        <!-- <div class="flex-row">
          <Wordcloud />
        </div>-->
      </el-col>
      <el-col :span="10">
        <div class="flex-row m-pan_box">
          <div class="m-pan">
            <div class="m-pan-val">{{user.public_repos}}</div>
            <div class="m-pan-title">仓库</div>
          </div>
          <div class="m-pan">
            <div class="m-pan-val">{{user.stared}}</div>
            <div class="m-pan-title">Stars</div>
          </div>
          <div class="m-pan">
            <div class="m-pan-val">{{user.watched}}</div>
            <div class="m-pan-title">Watches</div>
          </div>
          <div class="m-pan">
            <div class="m-pan-val">{{user.followers}}</div>
            <div class="m-pan-title">Followers</div>
          </div>
          <div class="m-pan">
            <div class="m-pan-val">{{user.following}}</div>
            <div class="m-pan-title">Following</div>
          </div>
        </div>
        <div class="flex-row" style="min-height: 28rem;">
          <div class="flex-row_title">
            <i class="el-icon-data-line title_icon"></i>
            仓库分析
          </div>
          <TwoWayBar v-if="showBar" :echartData="barData" />
          <Loding v-else />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-row">
          <div class="flex-row_title">
            <i class="el-icon-cold-drink title_icon"></i>
            粉丝
          </div>
          <MochePortrait :List="followersList" />
          <div class="flex-row_title">
            <i class="el-icon-milk-tea title_icon"></i>
            关注
          </div>
          <MochePortrait :List="followingList" />
        </div>
        <!-- <div class="flex-row">
          <div class="flex-row_title">
            <i class="el-icon-close-notification title_icon"></i>
            动态
          </div>
          <History />
        </div>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as gitee from "@/api/gitee";
import * as utils from "@/utils";
import Pie from "@/components/Pie";
import MochePortrait from "@/components/MochePortrait";
import Loding from "@/components/Loding";
import TwoWayBar from "@/components/TwoWayBar";

export default {
  components: {
    Pie,
    MochePortrait,
    Loding,
    TwoWayBar
  },
  data() {
    return {
      date: new Date(),
      user: {},
      show: false,
      showBar: false,
      pieData: [],
      barData: [],
      followersList: [],
      followingList: []
    };
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      _this.date = new Date().toLocaleString();
    });
    if (localStorage.getItem("user")) {
      _this.user = JSON.parse(localStorage.getItem("user"));
      _this.getFollowers();
      _this.getFollowing();
      _this.getRepos();
    } else {
      this.$router.push({ path: "/" });
    }
  },
  methods: {
    getFollowers() {
      gitee.followers(this.user.login).then(res => {
        this.followersList = res.data;
      });
    },
    getFollowing() {
      gitee.following(this.user.login).then(res => {
        this.followingList = res.data;
      });
    },
    getRepos() {
      gitee.repos(this.user.login).then(res => {
        let reposData = res.data;
        this.pieData = utils.language(reposData.map(item => item.language));
        this.barData = reposData.map(item => {
          return {
            name: item.name,
            star: item.stargazers_count,
            forks: item.forks_count
          };
        });
        this.show = true;
        this.showBar = true;
      });
    },
    parseTime(time) {
      return utils.parseTime(time);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      localStorage.clear();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 100vw;
  min-height: 100vh;
  background: url(../assets/img/tpl1/img/bg.jpg) no-repeat fixed;
  .header {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 4.5rem;
    line-height: 4.5rem;
    background: url(../assets/img/tpl1/img/header.png) 0 0 / 100% 100% no-repeat;
    overflow: hidden;
    .header-title {
      text-align: center;
      font-weight: 400;
      color: #bef2ff;
    }
  }
  .container_box {
    margin-top: 4.5rem;
    margin: 4.5rem 1.625rem 0 1.625rem;
    .el-col + .el-col {
      padding-left: 1rem;
    }
    .flex-row {
      background: rgba(10, 106, 255, 0.1);
      border-style: solid;
      border-width: 16px 27px 27px;
      border-image: url(../assets/img/tpl1/img/chart-wrapper.png) 26 27 27 fill /
        1 / 0 repeat;
      color: #bef2ff;
      .flex-row_title {
        display: flex;
        align-items: center;
        padding-bottom: 1.6rem;
        .title_icon {
          color: #f8b24f;
          font-size: 1.75rem;
          margin-right: 0.6rem;
        }
      }
    }
    .flex-row + .flex-row {
      margin-top: 1.25rem;
    }
    .m-pan_box {
      display: flex;
      justify-content: space-between;
      text-align: center;
      .m-pan-val {
        font-size: 2.2rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-weight: bold;
      }
    }
  }
  .map {
    // position: relative;
    img {
      width: 100%;
    }
    .map1,
    .map2,
    .map3 {
      position: absolute;
      opacity: 0.5;
    }
    .map1 {
      width: 27rem;
      left: 50%;
      top: 50%;
      margin-left: -13.5rem;
      margin-top: -13.5rem;
      animation: myfirst2 15s infinite linear;
    }
    .map2 {
      width: 27rem;
      left: 50%;
      opacity: 0.2;
      margin-left: -13.5rem;
      animation: myfirst 10s infinite linear;
    }
    .map3 {
      width: 25rem;
      top: 1.07rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.center {
  text-align: center;
}
.lineHeight {
  line-height: 1.75rem;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>